<template>
  <div>
    <button @click="debouncedClick">去抖</button>
    <br>
    <button @click="throttleClick">节流</button>
  </div>
</template>

<script>
// 引入 lodash 库，用于防抖和节流功能
import _ from 'lodash' 

export default {
  data() {
    return {
    }
  },
  methods: {
    click1() {
      console.log('click1 调用')
    },
    click2() {
      console.log('click2 调用')
    }
  },
  // vue 生命周期中的 created 钩子函数，实例创建后执行
  created() {
    console.log('created')
    // 函数去抖：1s 内重复点击按钮无效，最后一次点击完毕 1s 后触发 click1
    this.debouncedClick = _.debounce(this.click1, 1000) 
    // 函数节流：规定周期（1s）内重复触发点击，仅按周期执行 click2
    this.throttleClick = _.throttle(this.click2, 1000) 
  }
}
</script>

<style scoped>

</style>